
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="mishengqiang">
	<meta name="description" content="sweetalert是一个漂亮的弹窗。">
	<meta name="keywords" content="JavaScript,alert,swal,sweetalert">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
	<title>SweetAlert中文</title>

	<link rel="stylesheet" href="example.css">

	<!-- This is what you need -->
	<script src="sweetalert.js"></script>
	<link rel="stylesheet" href="sweetalert.css">
	<!--.......................-->

</head>

<body>

	<h1>Sweet Alert</h1>
	<h2>完美得无可替代</h2>
	<button class="download">下载</button>

	<!-- What does it do? -->
	<h3>那么……它都能做什么呢？</h3>
	<p>让我们来比较看一下错误消息的显示。第一个使用了内置的<strong>alert</strong>，第二个使用了<strong>sweetAlert</strong>。</p>

	<div class="showcase normal">
		<h4>普通alert</h4>
		<button>显示错误信息</button>

		<h5>代码:</h5>
		<pre><span class="attr">alert</span>(<span class="str">"哎呦……出错了！"</span>);</pre>

		<div class="vs-icon"></div>
	</div>

	<div class="showcase sweet">
		<h4>Sweet Alert</h4>
		<button>显示错误信息</button>

		<h5>代码:</h5>
		<pre><span class="attr">sweetAlert</span>(<span class="str">"哎呦……"</span>, <span class="str">"出错了！"</span>,<span class="str">"error"</span>);</pre>
	</div>

	<p>非常漂亮吧？无论你是在电脑、手机还是平板上，SweetAlert都会在页面上自动居中显示，这看起来非常棒。SweetAlert还可高度定制，正如下面你所看到的。</p>

	<!-- Examples -->
	<h3>示例</h3>

	<p class="center">在这些实例中，我们使用了简称函数<strong>swal</strong>调用sweetAlert。</p>

	<ul class="examples">

		<li class="message">
			<div class="ui">
				<p>基本信息弹窗</p>
				<button>尝试一下</button>
			</div>
			<pre><span class="attr">swal</span>(<span class="str">"这是一条信息！"</span>)</pre>
		</li>

		<li class="title-text">
			<div class="ui">
				<p>标题与文本的信息弹窗</p>
				<button>尝试一下</button>
			</div>
			<pre><span class="attr">swal</span>(<span class="str">"这是一条信息！"</span>, <span class="str">"很漂亮，不是吗？"</span>)</pre>
		</li>

		<li class="success">
			<div class="ui">
				<p>成功信息弹窗！</p>
				<button>尝试一下</button>
			</div>
			<pre><span class="attr">swal</span>(<span class="str">"干得漂亮！"</span>, <span class="str">"你点击了按钮！"</span>,<span class="str">"success"</span>)</pre>
		</li>

		<li class="warning confirm">
			<div class="ui">
				<p>警告信息弹窗，“确认”按钮带有一个函数……</p>
				<button>尝试一下</button>
			</div>
			<pre>
				<span class="attr">swal</span>({ 
				&nbsp;&nbsp;title: <span class="str">"确定删除吗？"</span>, 
				&nbsp;&nbsp;text: <span class="str">"你将无法恢复该虚拟文件！"</span>, 
				&nbsp;&nbsp;type: <span class="str">"warning"</span>,
				&nbsp;&nbsp;showCancelButton: <span class="val">true</span>, 
				&nbsp;&nbsp;confirmButtonColor: <span class="str">"#DD6B55"</span>,
				&nbsp;&nbsp;confirmButtonText: <span class="str">"确定删除！"</span>, 
				&nbsp;&nbsp;closeOnConfirm: <span class="val">false</span>
				},
				<span class="func"><i>function</i></span>(){
				&nbsp;&nbsp;<span class="attr">swal</span>(<span class="str">"删除！"</span>, <span class="str">"你的虚拟文件已经被删除。"</span>, <span class="str">"success"</span>); 
				});
			</pre>
		</li>

		<li class="warning cancel">
			<div class="ui">
				<p>…… 给函数传入参数，"取消"按钮也可以执行。</p>
				<button>尝试一下</button>
			</div>
			<pre>
				<span class="attr">swal</span>({ 
				&nbsp;&nbsp;title: <span class="str">"确定删除吗？"</span>, 
				&nbsp;&nbsp;text: <span class="str">"你将无法恢复该虚拟文件！"</span>, 
				&nbsp;&nbsp;type: <span class="str">"warning"</span>,
				&nbsp;&nbsp;showCancelButton: <span class="val">true</span>, 
				&nbsp;&nbsp;confirmButtonColor: <span class="str">"#DD6B55"</span>,
				&nbsp;&nbsp;confirmButtonText: <span class="str">"确定删除！"</span>, 
				&nbsp;&nbsp;cancelButtonText: <span class="str">"取消删除！"</span>,
				&nbsp;&nbsp;closeOnConfirm: <span class="val">false</span>, 
				&nbsp;&nbsp;closeOnCancel: <span class="val">false</span>				
				},
				<span class="func"><i>function</i></span>(isConfirm){ 
				&nbsp;&nbsp;<span class="tag">if</span> (isConfirm) { 
				&nbsp;&nbsp;&nbsp;&nbsp;<span class="attr">swal</span>(<span class="str">"删除！"</span>, <span class="str">"你的虚拟文件已经被删除。"</span>,
				<span class="str">"success"</span>); 
				&nbsp;&nbsp;} <span class="tag">else</span> { 
				&nbsp;&nbsp;&nbsp;&nbsp;<span class="attr">swal</span>(<span class="str">"取消！"</span>, <span class="str">"你的虚拟文件是安全的:)"</span>,
				<span class="str">"error"</span>); 
				&nbsp;&nbsp;} 
				});
			</pre>
		</li>

		<li class="custom-icon">
			<div class="ui">
				<p>自定义图标信息弹窗</p>
				<button>尝试一下</button>
			</div>
			<pre>
				<span class="attr">swal</span>({ 
				&nbsp;&nbsp;title: <span class="str">"漂亮！"</span>, 
				&nbsp;&nbsp;text: <span class="str">"这是自定义图标。"</span>,
				&nbsp;&nbsp;imageUrl: <span class="str">"images/thumbs-up.jpg"</span> 
				});
			</pre>
		</li>

		<li class="message-html">
			<div class="ui">
				<p>HTML信息弹窗</p>
				<button>尝试一下</button>
			</div>
			<pre>
				<span class="attr">swal</span>({ 
				&nbsp;&nbsp;title: <span class="str">"HTML &lt;small&gt;标题&lt;/small&gt;!"</span>,
				&nbsp;&nbsp;text: <span class="str">"自定义&lt;span style="color:#F8BB86"&gt;html&lt;span&gt;信息。"</span>, 
				&nbsp;&nbsp;html: <span class="val">true</span> 
				});
			</pre>
		</li>

		<li class="timer">
			<div class="ui">
				<p>定时关闭信息弹窗</p>
				<button>尝试一下</button>
			</div>
			<pre>
				<span class="attr">swal</span>({ 
				&nbsp;&nbsp;title: <span class="str">"自动关闭弹窗！"</span>, 
				&nbsp;&nbsp;text: <span class="str">"2秒后自动关闭。"</span>, 
				&nbsp;&nbsp;timer: <span class="val">2000</span>, 
				&nbsp;&nbsp;showConfirmButton: <span class="val">false</span> 
				});
			</pre>
		</li>


		<li class="input">
			<div class="ui">
				<p>输入信息弹窗</p>
				<button>尝试一下</button>
			</div>
			<pre>
				<span class="attr">swal</span>({ 
				&nbsp;&nbsp;title: <span class="str">"输入！"</span>, 
				&nbsp;&nbsp;text: <span class="str">"输入一些有趣的话："</span>,
				&nbsp;&nbsp;type: <span class="str">"input"</span>, 
				&nbsp;&nbsp;showCancelButton: <span class="val">true</span>, 
				&nbsp;&nbsp;closeOnConfirm: <span class="val">false</span>, 
				&nbsp;&nbsp;animation: <span class="str">"slide-from-top"</span>, 
				&nbsp;&nbsp;inputPlaceholder: <span class="str">"输入一些话"</span> 
				},
				<span class="func"><i>function</i></span>(<span class="arg">inputValue</span>){ 
				&nbsp;&nbsp;<span class="tag">if</span> (inputValue <span class="tag">===</span> <span class="val">false</span>) <span class="tag">return</span><span class="val">false</span>; 
				&nbsp;&nbsp;
				&nbsp;&nbsp;<span class="tag">if</span> (inputValue <span class="tag">===</span> <span class="str">""</span>) { 
				&nbsp;&nbsp;&nbsp;&nbsp;swal<span class="tag">.</span><span class="attr">showInputError</span>(<span class="str">"你需要输入一些话！"</span>);
				&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">return</span> <span class="val">false</span> 
				&nbsp;&nbsp;} 
				&nbsp;&nbsp;
				&nbsp;&nbsp;<span class="attr">swal</span>(<span class="str">"非常好！"</span>, <span class="str">"你输入了："</span> + inputValue,<span class="str">"success"</span>); 
				});
			</pre>
		</li>

		<li class="ajax">
			<div class="ui">
				<p>加载(AJAX请求示例)弹窗</p>
				<button>尝试一下</button>
			</div>
			<pre>
				<span class="attr">swal</span>({ 
				&nbsp;&nbsp;title: <span class="str">"Ajax请求示例"</span>, 
				&nbsp;&nbsp;text: <span class="str">"提交运行ajax请求"</span>, 
				&nbsp;&nbsp;type: <span class="str">"info"</span>, 
				&nbsp;&nbsp;showCancelButton: <span class="val">true</span>, 
				&nbsp;&nbsp;closeOnConfirm: <span class="val">false</span>, 
				&nbsp;&nbsp;showLoaderOnConfirm: <span class="val">true</span>, 
				},
				<span class="func"><i>function</i></span>(){ 
				&nbsp;&nbsp;<span class="attr">setTimeout</span>(<span class="func"><i>function</i></span>(){ 
				&nbsp;&nbsp;&nbsp;&nbsp;<span class="attr">swal</span>(<span class="str">"Ajax请求完成！"</span>); 
				&nbsp;&nbsp;}, <span class="val">2000</span>);
				});
			</pre>
		</li>

		<li class="theme">
			<div class="ui">
				<p>你可以改变SweetAlert的主题样式!</p>
				<button>尝试一下</button>
			</div>
			<pre>
				&lt;<span class="tag">link</span> <span class="attr">rel</span>=<span class="str">"stylesheet"</span> <span class="tag">type</span>=<span class="str">"text/css"</span> <span class="tag">href</span>=<span class="str">"dist/sweetalert.css"</span>&gt;
				&lt;<span class="tag">link</span> <span class="attr">rel</span>=<span class="str">"stylesheet"</span> <span class="tag">type</span>=<span class="str">"text/css"</span> <span class="tag">href</span>=<span class="str">"themes/twitter.css"</span>&gt;
			</pre>
		</li>

	</ul>


	<h3 id="download-section">使用</h3>
	<ol>
		<li>
			<p>引用必要的文件初始化插件：</p>
			<pre>
				&lt;<span class="tag">script</span> <span class="attr">src</span>=<span class="str">"sweetalert.js"</span>&gt;&lt;/<span class="tag">script</span>&gt; 
				&lt;<span class="tag">link</span> <span class="attr">rel</span>=<span class="str">"stylesheet"</span> <span class="tag">type</span>=<span class="str">"text/css"</span> <span class="tag">href</span>=<span class="str">"sweetalert.css"</span>&gt;
			</pre>
		</li>

		<li>
			<p>页面加载完成后调用sweetAlert函数</p>
			<pre>
				<span class="attr">swal</span>({ 
				&nbsp;&nbsp;title: <span class="str">"Error!"</span>, 
				&nbsp;&nbsp;text: <span class="str">"Here's my error message!"</span>,
				&nbsp;&nbsp;type: <span class="str">"error"</span>, 
				&nbsp;&nbsp;confirmButtonText: <span class="str">"Cool"</span> 
				});
			</pre>
		</li>
	</ol>



	<!-- Configuration -->
	<h3>配置</h3>

	<p class="center">你可以使用这些参数，通过一个对象传入到sweetAlert中：</p>

	<table>
		<tr class="titles">
			<th>
				<div class="border-left"></div>
				参数
			</th>
			<th>默认值</th>
			<th>
				<div class="border-right"></div>
				描述
			</th>
		</tr>
		<tr>
			<td><b>title</b></td>
			<td><i>null (required)</i></td>
			<td>弹窗的标题。可以通过对象的”title”属性或第一个参数进行传递。</td>
		</tr>
		<tr>
			<td><b>text</b></td>
			<td><i>null</i></td>
			<td>弹窗的描述。可以通过对象的”text”属性或第二个参数进行传递。</td>
		</tr>
		<tr>
			<td><b>type</b></td>
			<td><i>null</i></td>
			<td>弹窗的类型。SweetAlert有四个内置类型，可以展示相应的图标动画: "<strong>warning</strong>","<strong>error</strong>", "<strong>success</strong>" and "<strong>info"</strong>。你也可以设置为"<strong>input</strong>"类型变成输入弹窗。可以通过对象的”type”属性或第三个参数进行传递。
			</td>
		</tr>
		<tr>
			<td><b>allowEscapeKey</b></td>
			<td><i>true</i></td>
			<td>如果设置为<strong>true</strong>，用户可以通过按下Escape键关闭弹窗。</td>
		</tr>
		<tr>
			<td><b>customClass</b></td>
			<td><i>null</i></td>
			<td>弹窗的自定义样式，可以通过对象的"customClass"属性进行添加。</td>
		</tr>
		<tr>
			<td><b>allowOutsideClick</b></td>
			<td><i>false</i></td>
			<td>如果设置为<strong>true</strong>，用户点击弹窗外部可关闭弹窗。</td>
		</tr>
		<tr>
			<td><b>showCancelButton</b></td>
			<td><i>false</i></td>
			<td>如果设置为<strong>true</strong>，“取消”按钮将会显示，用户点击取消按钮会关闭弹窗。</td>
		</tr>
		<tr>
			<td><b>showConfirmButton</b></td>
			<td><i>true</i></td>
			<td>如果设置为<strong>false</strong>，“确认”按钮将会隐藏。为了良好的用户体验，最好你设置了定时关闭或者allowOutsideClick为true时才将该参数设置为false。</td>
		</tr>
		<tr>
			<td><b>confirmButtonText</b></td>
			<td><i>"OK"</i></td>
			<td>使用该参数来修改“确认”按钮的显示文本。如果showCancelButton设置为true，确定按钮的显示文本将会自动使用“Confirm”而不是“OK”。</td>
		</tr>
		<tr>
			<td><b>confirmButtonColor</b></td>
			<td><i>"#AEDEF4"</i></td>
			<td>使用该参数来修改“确认”按钮的背景颜色（必须是十六进制值）。</td>
		</tr>
		<tr>
			<td><b>cancelButtonText</b></td>
			<td><i>"Cancel"</i></td>
			<td>使用该参数来修改“取消”按钮的显示文本。</td>
		</tr>
		<tr>
			<td><b>closeOnConfirm</b></td>
			<td><i>true</i></td>
			<td>设置为<i>false</i>，用户点击“确认”按钮后，弹窗会继续保持打开状态。如果点击“确认”按钮后需要打开另一个SweetAlert弹窗，这是非常有用的。</td>
		</tr>
		<tr>
			<td><b>closeOnCancel</b></td>
			<td><i>true</i></td>
			<td>这和closeOnConfirm的功能相似，只不过这个是“取消”按钮。</td>
		</tr>
		<tr>
			<td><b>imageUrl</b></td>
			<td><i>null</i></td>
			<td>为弹窗添加一个自定义的图标。这个参数是一个字符串图片路径。</td>
		</tr>
		<tr>
			<td><b>imageSize</b></td>
			<td><i>"80x80"</i></td>
			<td>如果设置了imageUrl，你可以使用像素（px）指定图片大小来描述你想要多大的图标。在一个字符串中使用“x”来分割两个值，第一个值是宽度，第二值是高度。</td>
		</tr>
		<tr>
			<td><b>timer</b></td>
			<td><i>null</i></td>
			<td>自动关闭弹窗的定时器。单位为毫秒（ms）。</td>
		</tr>
		<tr>
			<td><b>html</b></td>
			<td><i>false</i></td>
			<td>如果你设置为<strong>true</strong>，参数title和参数text的值将会被html解析显示而不是纯文本。（如果你担心被XSS攻击那就设置为<strong>false</strong>。）</td>
		</tr>
		<tr>
			<td><b>animation</b></td>
			<td><i>true</i></td>
			<td>如果设置为<strong>false</strong>, 弹窗的动画将会被禁用。其它字符串值：<strong>pop</strong>(这是animation设置为true时的默认值), <strong>slide-from-top</strong>, <strong>slide-from-bottom</strong></td>
		</tr>
		<tr>
			<td><b>inputType</b></td>
			<td><i>"text"</i></td>
			<td>当使用<strong>type: "input"</strong>时，该参数用来改变输入的类型(例如：如果你想让用户输入密码，这可能是有用的)。</td>
		</tr>
		<tr>
			<td><b>inputPlaceholder</b></td>
			<td><i>null</i></td>
			<td>当使用输入类型时，你可以使用placeholder来帮助用户明白应该输入什么内容。</td>
		</tr>
		<tr>
			<td><b>inputValue</b></td>
			<td><i>null</i></td>
			<td>当使用<strong>type: "input"</strong>时，你希望在输入前展示默认值时，可以指定一个默认值。</td>
		</tr>
		<tr>
			<td><b>showLoaderOnConfirm</b></td>
			<td><i>false</i></td>
			<td>设置为<strong>true</strong>，当处于加载时会禁用确认按钮并显示为加载样式。</td>
		</tr>
	</table>


	<!-- Methods -->
	<h3>方法</h3>

	<p class="center">SweetAlert还带有一些简单的方法，你可以调用它们：</p>

	<table>
		<tr class="titles">
			<th>
				<div class="border-left"></div>
				方法
			</th>
			<th>示例</th>
			<th>
				<div class="border-right"></div>
				描述
			</th>
		</tr>
		<tr>
			<td>setDefaults</td>
			<td><i>swal.setDefaults({ confirmButtonColor: '#0000' });</i></td>
			<td>当调用SweetAlert时，如果你使用很多相同的设置，您可以在程序的开始使用setDefaults设置它们！</td>
		</tr>
		<tr>
			<td>close</td>
			<td><i>swal.close();</i></td>
			<td>通过编程的方式将当前打开的SweetAlert弹窗关闭。</td>
		</tr>
		<tr>
			<td>showInputError</td>
			<td><i>swal.showInputError("Invalid email!");</i></td>
			<td>如果用户输入的数据是错误的，在验证输入字段后会显示一个错误的信息。</td>
		</tr>
		<tr>
			<td>enableButtons, disableButtons</td>
			<td><i>swal.disableButtons();</i></td>
			<td>禁用或启用用户点击取消按钮和确认按钮。</td>
		</tr>
	</table>



	<!-- Contribute -->
	<h3>贡献</h3>
	<p>SweetAlert是由<a href="http://tristanedwards.me" target="_blank">Tristan Edwards</a>创建的，你可以关注他的<a href="https://twitter.com/t4t5" target="_blank" class="twitter">Twitter</a>或者<a href="https://dribbble.com/tristanedwards" target="_blank" class="dribbble">Dribbble</a>更新和其它酷的项目！</p>
	<p>如果你想要添加新特性，欢迎你在<a href="https://github.com/t4t5/sweetalert" class="github">GitHub</a>上fork SweetAlert项目！</p>
	<footer>
		<span class="te-logo">TE</span> • <script>document.write(new Date().getFullYear())</script>
	</footer>
	<p class="center">本站点翻译自<a style="display: inline-block;width: 90px;height: 18px;margin-top: -3px;text-indent: -9999px;background-image: url(./images/logo_small.png);background-image: -webkit-image-set(url(./images/logo_small.png) 1x, url(./images/logo_small@2x.png) 2x);background-size: cover;vertical-align: middle;" href="http://t4t5.github.io/sweetalert/">SweetAlert</a></p>
	<script>

document.querySelector('button.download').onclick = function(){
	$("html, body").animate({ scrollTop: $("#download-section").offset().top }, 1000);
};

document.querySelector('.showcase.normal button').onclick = function(){
	alert("哎呦……出错了！");
};

document.querySelector('.showcase.sweet button').onclick = function(){
	swal("哎呦……", "出错了！", "error");
};

document.querySelector('ul.examples li.message button').onclick = function(){
	swal("这是一条信息！");
};

document.querySelector('ul.examples li.timer button').onclick = function(){
	swal({
		title: "自动关闭弹窗！",
		text: "2秒后自动关闭。",
		timer: 2000,
		showConfirmButton: false
	});
};

document.querySelector('ul.examples li.title-text button').onclick = function(){
	swal("这是一条信息！", "很漂亮，不是吗？");
};

document.querySelector('ul.examples li.success button').onclick = function(){
	swal("干得漂亮！", "你点击了按钮！", "success");
};

document.querySelector('ul.examples li.warning.confirm button').onclick = function(){
	swal({
		title: "确定删除吗？",
		text: "你将无法恢复该虚拟文件！",
		type: "warning",
		showCancelButton: true,
		confirmButtonColor: '#DD6B55',
		confirmButtonText: '确定删除！',
		closeOnConfirm: false
	},
	function(){
		swal("删除！", "你的虚拟文件已经被删除。", "success");
	});
};

document.querySelector('ul.examples li.warning.cancel button').onclick = function(){
	swal({
		title: "确定删除吗？",
		text: "你将无法恢复该虚拟文件！",
		type: "warning",
		showCancelButton: true,
		confirmButtonColor: '#DD6B55',
		confirmButtonText: '确定删除！',
		cancelButtonText: "取消删除！",
		closeOnConfirm: false,
		closeOnCancel: false
	},
	function(isConfirm){
    if (isConfirm){
      swal("删除！", "你的虚拟文件已经被删除。", "success");
    } else {
      swal("取消！", "你的虚拟文件是安全的:)", "error");
    }
	});
};

document.querySelector('ul.examples li.custom-icon button').onclick = function(){
	swal({
		title: "漂亮！",
		text: "这是自定义图标。",
		imageUrl: 'images/thumbs-up.jpg'
	});
};

document.querySelector('ul.examples li.message-html button').onclick = function(){
	swal({
		title: "HTML <small>标题</small>!",
		text: '自定义<span style="color:#F8BB86">html<span>信息。',
		html: true
	});
};

document.querySelector('ul.examples li.input button').onclick = function(){
	swal({
		title: "输入！",
		text: '输入一些有趣的话：',
		type: 'input',
		showCancelButton: true,
		closeOnConfirm: false,
		animation: "slide-from-top",
		inputPlaceholder: "输入一些话",
	},
	function(inputValue){
		if (inputValue === false) return false;

		if (inputValue === "") {
			swal.showInputError("你需要输入一些话！");
			return false;
		}
    
		swal("非常好！", '你输入了：' + inputValue, "success");

	});
};

document.querySelector('ul.examples li.theme button').onclick = function() {
	swal({
		title: "主题！",
		text: "这是Twitter主题的SweetAlert!",
		confirmButtonText: "酷！",
		customClass: 'twitter'
	});
};

document.querySelector('ul.examples li.ajax button').onclick = function() {
  swal({
    title: 'Ajax请求示例',
    text: '提交运行ajax请求',
    type: 'info',
    showCancelButton: true,
    closeOnConfirm: false,
    showLoaderOnConfirm: true,
  }, function(){
    setTimeout(function() {
      swal('Ajax请求完成！');
    }, 2000);
  });
};

</script>



</body>

</html>